<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
    style="border: 1px solid rgb(49, 69, 114);"
  >
    <template #Context>
      <n-tabs type="line" animated>
        <n-tab-pane display-directive="show" name="pc" tab="管理端菜单">
          <n-tree
            v-if="tabsTreeVisible"
            ref="adminTreeRef"
            block-line
            cascade
            checkable
            default-expand-all
            virtual-scroll
            label-field="name"
            :data="adminData"
            :default-checked-keys="adminKeys"
            style="height: 400px"
          />
        </n-tab-pane>
<!--        <n-tab-pane display-directive="show" name="mp" tab="小程序菜单">-->
<!--          <n-tree-->
<!--            v-if="tabsTreeVisible"-->
<!--            ref="miniTreeRef"-->
<!--            block-line-->
<!--            cascade-->
<!--            checkable-->
<!--            default-expand-all-->
<!--            virtual-scroll-->
<!--            label-field="name"-->
<!--            :data="miniData"-->
<!--            :default-checked-keys="miniKeys"-->
<!--            style="height: 400px"-->
<!--          />-->
<!--        </n-tab-pane>-->
      </n-tabs>
    </template>
  </Modal>
</template>

<script>
import Modal from '@/components/Modal/index.vue'
import { getRoleMenu, saveRoleMenu } from '@/api/system/role.js'
import { toTreeData } from '@/utils/handleData.js'
import { defineComponent, ref, reactive, computed, toRefs, onBeforeMount, nextTick } from 'vue'
import { debounce } from '@/utils/index.js'

export default defineComponent({
  name: 'UserModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'create'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const MODAL_TYPE = { 'relate': '分配权限' }
    const adminTreeRef = ref()
    const miniTreeRef = ref()
    const data = reactive({
      tabsTreeVisible: false,
      adminData: [],
      adminKeys: [],
      miniData: [],
      miniKeys: []
    })
    const getModalOptions = computed(() => {
      return {
        title: MODAL_TYPE[props.type],
        width: 600,
        show: props.visible,
        trapFocus: false,
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    const handleConfirm = debounce(() => {
      const adminCheckedData = adminTreeRef.value.getCheckedData()
      const adminIndeterminateData = adminTreeRef.value.getIndeterminateData()
      // const miniCheckedData = miniTreeRef.value.getCheckedData()
      // const miniIndeterminateData = miniTreeRef.value.getIndeterminateData()
      const adminKeys = adminCheckedData.keys.concat(adminIndeterminateData.keys)
      // const miniKeys = miniCheckedData.keys.concat(miniIndeterminateData.keys)
      const params = { roleId: props.data.id, ids: adminKeys }
      saveRoleMenu(params).then(res => {
        if (res.code === 0) {
          emit('reload')
          handleClose()
        }
      }).catch(e => {
        console.log(e)
      })
    }, 2000, true)

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    const querySelectedKeys = (data, list) => {
      data.forEach((item) => {
        if (item.children && item.children.length) {
          querySelectedKeys(item.children, list)
        } else {
          if (item.checked) {
            list.push(item.key)
          }
        }
      })
    }

    onBeforeMount(async() => {
      const res = await getRoleMenu({ roleId: props.data.id })
      if (res.code === 0) {
        const { opMenusList, permissionsList } = res.data
        const adminMenus = opMenusList.filter((item) => {
          item.title = item.name
          item.key = item.id
          return item.clientId === 'tuoheng-airmonitor-admin'
        })
        const adminPermissions = permissionsList.filter((item) => {
          item.title = item.name
          item.parentId = item.menuId
          item.key = item.identificationId
          return item.clientId === 'tuoheng-airmonitor-admin'
        })
        const mpMenus = opMenusList.filter((item) => {
          item.title = item.name
          item.key = item.id
          return item.clientId === 'tuoheng-waterway-mp'
        })
        const mpPermissions = permissionsList.filter((item) => {
          item.title = item.name
          item.parentId = item.menuId
          item.key = item.identificationId
          return item.clientId === 'tuoheng-waterway-mp'
        })
        const adminData = adminMenus.concat(adminPermissions)
        const adminTreeData = toTreeData(adminData, 'key', 'parentId', 'children')
        data.adminKeys = []
        querySelectedKeys(adminTreeData, data.adminKeys)
        const miniData = mpMenus.concat(mpPermissions)
        const miniTreeData = toTreeData(miniData, 'id', 'parentId', 'children')
        data.miniKeys = []
        querySelectedKeys(miniTreeData, data.miniKeys)

        nextTick(() => {
          data.tabsTreeVisible = true
          data.adminData = adminTreeData
          data.miniData = miniTreeData
        })
      }
    })

    return {
      ...toRefs(data),
      adminTreeRef,
      miniTreeRef,
      getModalOptions,
      handleConfirm,
      handleClose
    }
  }
})
</script>

<style scoped lang='scss'>
.n-input-number{
  width: 100%;
}

.flex__body{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .n-form-item{
    width: 100%;
  }
  // .flex__item{
  //   width: 50%;
  // }
}

.n-date-picker{
  width: 100%;
}
</style>
